今天起，我們來建構 ColorCodeTag Java 後端程式，昨天我們為 Sprint 立下了後端 API 的目標:

製作可接收照片，並回傳一組色碼的 API (Spring Boot 專案)

關於後端的建置將分為上、下兩個篇幅，今日我們先分析要完成的任務步驟，並簡單介紹一下 r,g,b 三維空間與 K-means 演算法。

任務分析

在公司裡資深的前輩最喜歡講的一句話就是 "解釋得出來就寫的出來" (並沒有)，Sprint 目標簡短的一句話，在 Java 實踐的過程需要完成任務包含:

1. 在 localhost:8081 開立 HTTP POST API 
2. 接收照片，Header Content-Type 為 multipart/form-data
3. 將 picture 轉換成 File pictureFile
4. 讀取 pictureFile 的 pixel，取得該 r,g,b 座標
5. 將取得的 rgb 座標以 K-means 分成 5 群，並取出五個分群的中心座標
6. 將五個中心座標由用和原點的歐式距離進行排序
7. 將中心座 r,g,b 轉換成 Hex 並回傳

開發環境

在 Window 10 下使用 Java 11 搭配 IDE (Eclipse 2020-9) 開發，先不實做 Repository 方法，將結果存於 DB 這個任務交由後面的 Sprint 實作。

r, g, b 三維空間

r, g, b 的三維空間是由紅色、綠色和藍色三個顏色對應到三維笛卡爾座標中的，X, Y, Z 軸，顏色的頂點另有黑(為原點)、白、青、黃、品紅色。

(取自 Microsoft doc)

RGB 的色碼在網頁中最常用兩種方式表示色彩，分別是二進制與十六進制的表達方法，相信有接觸 html/css 的人一定不陌生:

body {
color: #FFFF00;
color: (255,255,0);
}

這裡小小科普一下，或許有人會好奇，為什麼 r, g, b 會切分在 0 ~ 255 之間 ? 就讓我翻出大家書架上應該都有一本的計算機概論來講古，並需要了解兩個電腦核心的概念，二進制與位元組。對電腦而言，所有的一切都只有高電位和低電位 (通電與不通電)，也就是只有 0 和 1 的世界，因此誕生了二進制運算。而今日標準以 8 位元 (bit) 作為一個位元組 (byte)。

如果大家有經歷過箱型電視的年代 (或是把水珠潑到螢幕上)，可能會親眼見證組成螢幕顏色的 Pixel 內，其包含了三個顏色的小燈泡，由於 RGB 是加法混色，在電腦輸出顏色時藉由調整 r, g, b 對應的亮度，組成 Pixel 呈現的顏色。而電腦控制會需要一個位元組，換算成十進制後便是 256。

(大概是長這樣子，怎麼像我外婆去菜市場用的袋子?)

所以在 r, g, b 三維空間的八個頂點就分別為:

科普到這裡，大家可能會思考，我們擷取了照片上的顏色的座標後，可能會拿到一個統計了座標與數量的表格，那麼下一步又該怎麼從中挑出代表色呢? 我們來介紹 K-means 演算法分群。

K-means 演算法

K-Means 是一個將數據分類的演算法，其目的是將相似的資料分成同一組(或稱 Cluster 群集)。而相似的程度，通常會用歐式距離做計算。

關於 K-means 的細節在本篇就不多作介紹，詳細的流程可以參考 PyInvest 聚類分析 K-means 的影片，我這裡就以 ColorCodeTag 的應用為例子，解釋在 Java 實踐的過程中會經歷哪些步驟:

1. 隨機挑選 RGB 空間內的五個顏色座標為群集中心 (隨機挑五個顏色)
2. 計算照片中每一個 pixel 和群集中心的距離，並將距離最近的 pixel 歸類給該群集 (比較照片的每個 pixel 的顏色跟上面五個顏色中誰像就歸類給誰)
3. 完成歸類後，計算該集群的中心點，並列為新的中心點
4. 重複步驟 2,3 直到中心點不再移動或是小於一個設定值

完成後，我們即可從一張照片中，獲得五個具有代表性的顏色座標，回傳給前端。

今日總結

今天，我們分析了後端實踐 API 要完成的步驟，以及科普了照片色域及顏色分群的知識，明天，我們就一起看 Code 的內容，並進行測試吧 !

參考資料

Microsoft - RGB 色彩空間